<template>
    <el-container class="home-container">
        <el-header>
            <span class="header-title">V部落博客管理平台</span>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">{{currentUserName}}
                    <i class="el-icon-arrow-down el-icon--right"/>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="systemMessage">系统消息</el-dropdown-item>
                    <el-dropdown-item command="myArticle">我的文章</el-dropdown-item>
                    <el-dropdown-item command="myHome">个人主页</el-dropdown-item>
                    <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="currentTab" router @select="selectTab">
                    <template v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden">
                        <el-submenu :index="index+''" v-if="item.children.length>1" :key="index">
                            <template slot="title">
                                <i :class="item.iconClass"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="child in item.children" v-if="!child.hidden" :index="child.path"
                                          :key="child.path">
                                {{child.name}}
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :index="item.children[0].path">
                            <i :class="item.children[0].iconClass"></i>
                            <span>{{item.children[0].name}}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                </el-breadcrumb>
                <keep-alive>
                    <router-view v-if="this.$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!this.$route.meta.keepAlive"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import {get} from "../utils/api";

    export default {
        data() {
            return {
                currentTab: '/articleList',
                currentUserName: '',
            }
        },
        methods: {
            selectTab(index) {
                this.currentTab = index;
            },
            handleCommand(command) {
                let _this = this;
                switch (command) {
                    case 'systemMessage':
                        this.$message('点击系统消息');
                        this.active = '/postArticle'
                        this.$router.replace('/postArticle')
                        break;
                    case 'myArticle':
                        this.$message('点击我的文章');
                        break;
                    case 'myHome':
                        this.$message('点击个人主页');
                        break;
                    case 'logout':
                        this.$confirm('注销登录吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: "warning"
                        }).then(function () {
                            get("/logout").then(res => {
                                console.log(res);
                            })
                            _this.currentUserName = '';
                            _this.$router.replace('/');
                        });
                        break;
                }
            }
        },
        mounted() {
            get('/user/getCurrentUser').then(res => {
                if (res.status === 0) {
                    this.currentUserName = res.data.nickName;
                }
                this.$router.replace('/articleList');
            })

            window.bus.$on('menuRefresh', () => {
                this.$router.replace('/articleList');
                this.currentTab = '/articleList';
            });
        }
    }
</script>

<style scoped lang="stylus">
    .home-container {
        height 100vh

        .el-header {
            display flex
            align-items center
            justify-content space-between
            background-color #20a0ff;

            .header-title {
                color white
                font-size 24px
            }

            .el-dropdown-link {
                cursor pointer
                color white
                font-size 16px
            }
        }

        .el-menu {
            background-color #ECECEC;
            height 100%

            span {
                margin-left 10px
            }
        }
    }
</style>
